<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 可选的框架 -->
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app" class="main">
        <div class="an-wrap">
            <div class="node" v-for="(nodeListItem,nodeListIndex) in  nodeList" :style="nodeListItem.style">
                {{nodeListItem.id}}
            </div>
            <div class="line" v-for="(lineListItem,lineListIndex) in  lineList" :style="lineListItem.style">
                <p :style="
                    {transform:`
                        rotate(${lineListItem.style.transform.match(/\-?\d+/)
                            >0?
                            0-lineListItem.style.transform.match(/\d+/)
                            :
                            lineListItem.style.transform.match(/\d+/)}deg)`}
                    ">
                    {{lineListItem.cost}}</p>
            </div>
        </div>

        <div class="ct-wrap">
            <!-- 控制容器 control-wrap -->
            <div type="button" class="button-blue" @click="autoNextStep">
                <div class="" id="autoNextStep">
                    自动
                </div>
            </div>
            <div type="button" class="button-red" @click="nextStep">
                <div class="">
                    下一步
                </div>
            </div>
            <div type="button" class="button-orange" @click="reset">
                <div class="">
                    重置
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 引入当前目录下的css和js -->
<link rel="stylesheet" type="text/css" href="./kruskal.css" />
<script type="text/javascript" src="./kruskal.js"></script>
<!-- element-ui -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入控件，可选 -->
<link rel="stylesheet" type="text/css" href="../../../css/control.css" />
<script src="../../../js/control.js" type="text/javascript" charset="utf-8"></script>


</html>